上一篇建立完角色陣容後，今天要來做已選取的角色陣容。
在 component 資料夾中新增 HeroList.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class HeroList extends Component {
  render(){
    return(
      <div>
        <h4> Your Hero Squad</h4>
        <ul className="list-group">
          {this.props.heroes.map(hero => {
            return (
              <li key={ hero.id } className="list-group-item">
                <div className="list-item">
                  { hero.name }
                </div>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}

接著要撰寫 map props 的邏輯並把它 export

function mapStateToProps(state){
  return {
    heroes: state.heroes
  }
}

export default connect(mapStateToProps, null)(HeroList);

回到我們的 parent component App.js，先把 HeroList 引入

import HeroList from './HeroList';

遇到蟲蟲卡死
持續更新中。。。。